<template>
	<!-- 我的任务 -->
	<view class="myTask">
<!-- 		<view class="bg_top" :style="'height:'+(2*menuButtonInfo.top+48)+'rpx'"></view>
		<view class="top z_index" :style="'padding-top:'+ menuButtonInfo.top + 'px'">
			<u-icon @click="goNavigateBack" class="top_icon" name="arrow-left" color="#000000" size="40"></u-icon>
			<view class="top_title">我的任务</view>
		</view> -->
		<view class="bg_"></view>

		<!-- <view class="content" :style="'padding-top:'+ (2*menuButtonInfo.top+58) + 'rpx'"> -->

		<view class="content">
			<view class="content_" v-for="(item,index) in userTask" :key="index">
				<view class="content_title">{{item.activityName}}</view>
				<view class="content_task" v-for="(newItem,newIndex) in item.utilItemList" :key="newIndex" @click="gotaskTitle(newItem.hasFill,item.activityId,newIndex)">
					<view class="content_task_title">{{newItem.utilItemName}}
						<!-- <view v-if="!newItem.hasFill" @click="gotaskTitle(newItem.hasFill,item.activityId,newIndex)" class="content_task_title_"> -->
						<view v-if="!newItem.hasFill" class="content_task_title_">
							<text >去完成</text><u-icon name="arrow-right" color="red;" size="22"></u-icon>
						</view>
						<view v-if="newItem.hasFill" class="content_task_title_">
						<!-- <view v-if="newItem.hasFill" @click="gotaskTitle(newItem.hasFill,item.activityId,newIndex)" class="content_task_title_"> -->
							<text  class="content_task_title_wc">已完成，查看答卷</text><u-icon name="arrow-right" color="red;" size="22"></u-icon>
						</view>
					</view>
					<view class="content_task_text">{{newItem.desc}}</view>
				</view>
                
			</view>
			
			<loading :toast="isLoading" :title="'暂无任务'"></loading>
		</view>
	
		
	</view>
</template>

<script>
	import loading from '@/components/loading/loading.vue'
	import empty from "@/components/defaultpage/empty.vue"
	import network from "@/components/defaultpage/network.vue"
	export default {
		data() {
			return {
				// menuButtonInfo: {
				// 	top: 25
				// },
				userTask: [],
				pageSize: 10, //条数
				pageNum: 1, //第几页
				isBottom: true,
				loadText: {
					loadmore: '已经到底了',
					loading: '努力加载中',
					nomore: '已经到底了'
				},
				isLoading: 'Loading'
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.userTask = []
			this.isLoading = 'Loading';
		
				this.userActivityongoing();
		
			
		},
		components:{
			empty,
			network,
			loading
		},
		onReachBottom() {
			console.log("触底")
			if(this.isBottom){
				this.pageNum ++;
				this.isLoading = 'Loading';
				
					this.userActivityongoing();
				
				
			}
			
		},
		methods: {
		
			goNavigateBack() {
				uni.navigateBack()
			},
			userActivityongoing(){
				this.$apis.userActivityOngoing(
					{
						pageNum: this.pageNum,
						pageSize: this.pageSize || 10
					}
				).then(res=>{
					// console.log("123", res)
					// debugger
					if(res.code == 200){
						
						if(res.rows.length != 0){
							// debugger
							// this.userTask = res.rows;
							let v = [...this.userTask,...res.rows];
							this.isLoading = '';
							this.userTask = this.$Tools.deepCapy(this.userTask,v);
							if(res.rows.length < this.pageSize){
								this.isBottom = true;
								
								this.isLoading = 'moduleNomore';
							}
							// this.userTask.push(res.rows)
						}else{
							this.isBottom = false;
							this.isLoading = 'moduleNomore';
							if(this.pageNum == 1){
								this.isLoading = 'empty';
							}
						}
					}
				})
			},  
			gotaskTitle(hasFill,activityId,index){
				// hasFill  false: 去完成,true: 已完成
				if(hasFill){
					uni.navigateTo({
						url: "../../probeShop/answerSheet/answerSheet?index="+index+"&activityId="+activityId
					})
				}else{
					uni.navigateTo({
						url: "../../probeShop/taskTitle/taskTitle?isHasFill="+(!hasFill)+"&index="+index+"&activityId="+activityId
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.bg_top{
		width: 750rpx;
		background-color: #ffffff;
		position: fixed;
		z-index: 9;
	}
	.z_index{
		z-index: 10;
	}
	.top{
		width: 750rpx;
		height: 48rpx;
		background-color: #FFFFFF;
		position: fixed;
		padding-bottom: 20rpx;
	}
	.top_icon{
		margin-left: 32rpx;
		display: inline-block;
	}
	.top_title{
		position: absolute;
		font-size:34rpx;
		font-weight: 500;
		line-height: 48rpx;
		display: inline-block;
		left: 50%;
		transform: translate(-50%);
	}
	.circle {
		    width: 100%;
		    height: 100vh;
		    justify-content: center;
		    align-items: center;
		    padding-top: 65%;
	}
	.bg_{
		background: #f5f6f8;
		width: 750rpx;
		height: 100vh;
		position: fixed;
		top: 0;
		z-index: -1;
	}
	
	.content{
		padding-top: 20rpx;
		// margin-bottom: 400rpx;
	}
	.content_{
		width: 670rpx;
		padding: 40rpx 40rpx 10rpx 40rpx;
		background: #FFFFFF;
		margin-bottom: 20rpx;
	}
	.content_title{
		font-size: 36rpx;
		font-weight: 700;
		margin-bottom: 30rpx;
	}
	.content_task{
		width: 670rpx;
		height: 190rpx;
		border: 2rpx solid #e1e3e5;
		border-radius: 12rpx;
		margin-bottom: 30rpx;
	}
	.content_task_title{
		width: 610rpx;
		padding: 28rpx 26rpx 16rpx 30rpx;
		font-size: 32rpx;
		font-weight: 700;
		position: relative;
	}
	.content_task_title_{
		display: inline-block;
		position: absolute;
		right: 22rpx;
		font-size: 28rpx;
		color: red;
	}
	.content_task_title_wc{
		color: #5e5e5e;
	}
	.content_task_text{
		width: 610rpx;
		// height: 60rpx;
		padding: 0 30rpx;
		font-size: 26rpx;
		line-height: 36rpx;
		color: #555a62;
		
		overflow: hidden;
		-webkit-line-clamp:2;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}

</style>
